<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="120px">
			<div class="topNav">
				<el-button type="text" @click="importHandle">导出excel</el-button>
				<el-button type="text" style="float:right;" icon="el-icon-search" @click="getList">搜索</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" size="" value-format='yyyy-MM-dd hh:mm:ss'>
				</el-date-picker>
			</el-form-item>
			
			<el-form-item label="商品类别">
				<el-select v-model="queryParams.categoryName" multiple placeholder="请选择商品类别" @change="changClass">
					<el-option v-for="item in categoryNameOptions" :key="item.value" :label="item.label"
						:value="item.value" >
					</el-option>
				</el-select>
			</el-form-item>

		</el-form>

		<el-table :data="list"  stripe border height="calc(100vh - 270px)">
			<!-- 	<el-table-column v-if="list[0].sku != 'undefined' || list[0].sku != ''" label="坤震行" align="center"
				prop="sku"></el-table-column> -->
				<template v-for="(org,index) in orgs" style="width: 100px;">
					<el-table-column :prop="org.prop" :label="org.label" align="left">
					</el-table-column>
				</template>
		</el-table>

		<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" /> -->
	</div>
</template>

<script>
	import {
		LeaderTopClass,
		getLeaderTopClassExport
	} from "@/api/leader/leaderapi";
	export default {
		name: "",
		// 页面数据
		data() {
			return {

				queryParams: {
					categoryName: [],
					pageNum: 1, // 显示第一页数据
					pageSize: 100, //每页显示十条
					beginTime: "",
					endTime: ""
				},
				categoryNameOptions: [{
					value: '气动/液压',
						label: '气动/液压'
					},
					{
						value: '泵/阀/管路',
						label: '泵/阀/管路'
					},
					{
						value: '暖通',
						label: '暖通'
					},
					{
						value: '空气动力',
						label: '空气动力'
					},
					{
						value: '动力/传动',
						label: '动力/传动'
					},
					{
						value: '制冷',
						label: '制冷'
					},
					{
						value: '紧固/密封',
						label: '紧固/密封'
					},
					{
						value: '仪器仪表',
						label: '仪器仪表'
					},
					{
						value: '办公用品',
						label: '办公用品'
					},
					{
						value: '动力工具',
						label: '动力工具'
					},
					{
						value: '劳保用品',
						label: '劳保用品'
					},
					{
						value: '化学试剂',
						label: '化学试剂'
					},
					{
						value: '安全防护',
						label: '安全防护'
					},
					{
						value: '建材',
						label: '建材'
					},
					{
						value: '手动工具',
						label: '手动工具'
					},
					{
						value: '搬运/存储',
						label: '搬运/存储'
					},
					{
						value: '暖通',
						label: '暖通'
					},
					{
						value: '润滑油',
						label: '润滑油'
					},
					{
						value: '焊接',
						label: '焊接'
					},
					{
						value: '照明',
						label: '照明'
					},
					{
						value: '生活用品',
						label: '生活用品'
					},
					{
						value: '电器设备',
						label: '电器设备'
					},
					{
						value: '电气',
						label: '电气'
					},
					{
						value: '空气动力',
						label: '空气动力'
					},
					{
						value: '胶粘',
						label: '胶粘'
					},
					{
						value: '金属加工',
						label: '金属加工'
					}
				],
				orgs: [{
						prop: "topClass",
						label: "商品大类"
					},
					{
						prop: "zkh",
						label: "震坤行"
					},
					{
						prop: "zkhB",
						label: "震坤行占比"
					},
					{
						prop: "xy",
						label: "西域"
					},
					{
						prop: "xyB",
						label: "西域占比"
					},
					{
						prop: "gaj",
						label: "固安捷"
					},
					{
						prop: "gajb",
						label: "固安捷占比"
					},
					{
						prop: "xfs",
						label: "鑫方盛"
					},
					{
						prop: "xfsB",
						label: "鑫方盛占比"
					},
					{
						prop: "jd",
						label: "京东"
					},
					{
						prop: "jdB",
						label: "京东占比"
					},
					{
						prop: "lxwl",
						label: "领先未来"
					},
					{
						prop: "lxwlB",
						label: "领先未来占比"
					},
					{
						prop: "dl",
						label: "得力"
					},
					{
						prop: "dlB",
						label: "得力占比"
					},
					{
						prop: "cg",
						label: "晨光"
					},
					{
						prop: "cgB",
						label: "晨光占比"
					},
					{
						prop: "ofs",
						label: "欧菲斯"
					},
					{
						prop: "ofsB",
						label: "欧菲斯占比"
					},
					{
						prop: "stb",
						label: "史泰博"
					},
					{
						prop: "stbB",
						label: "史泰博占比"
					}
				],
				list:[],
				sortType: [{
					value: "num",
					label: "按销量排序"
				}, {
					value: "sumBudget",
					label: "按销售额排序"
				}],
				timeModel: [],
				total: 0, // 一共多少条数据
			};
		},
		// 初始化
		mounted() {
			this.getList()
		},
		// 函数集合
		methods: {
			getList() {
				console.log('187',this.timeModel)
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let params = {
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					categoryName: this.queryParams.categoryName,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
				};
				console.log(params.categoryName)
				LeaderTopClass(params).then(res => {
					// this.list = res
					// this.total = res.length
					this.list = res.rows
					this.total = res.total
				})
			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
			 	navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
			 	link.download = filename
			  link.style.display = 'none'
			  body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				if (this.timeModel) {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let newSearch = {
					beginTime: this.queryParams.beginTime ?this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
					categoryName: this.queryParams.categoryName ? this.queryParams.categoryName : [],
				}
				getLeaderTopClassExport(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '供应商销售列表.xls')
				})
			},
			
			
			
			changClass(){
				console.log(this.queryParams.categoryName)
		},
		
		}
	}
</script>

<style>
</style>
